<template>
  <div>
    <el-dialog
      title="产品物模型"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div v-if="dialogVisible" v-loading="loading">
        <el-tabs
          type="border-card"
          v-model="activeTab"
          @tab-click="handleClick"
        >
          <el-tab-pane label="功能列表" name="0">
            <functionConfig
              v-if="activeTab == 0"
              :deviceType="deviceType"
              :model="model"
            ></functionConfig>
          </el-tab-pane>
          <!-- <el-tab-pane label="TSL" :name="1">
                        <tsl v-if="activeTab == 1" :deviceType="deviceType" :model="state.model" />
                    </el-tab-pane> -->
          <el-tab-pane label="型号配置" name="2">
            <productModel
              v-if="activeTab == 2"
              ref="refproductModel"
              :id="id"
            ></productModel>
          </el-tab-pane>
          <el-tab-pane label="指令配置" name="3">
            <instructionConfig
              v-if="activeTab == 3"
              ref="refInstructionConfig"
              :deviceType="deviceType"
              :model="model"
              :thingModelId="thingModelId"
            ></instructionConfig>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqByProductKey } from "@/api/rule";
import { mapState } from "vuex";
import functionConfig from "./functionConfig.vue";
import productModel from "./productModel.vue";
import instructionConfig from "./instructionConfig.vue";

export default {
  name: "",
  props: [],
  components: {
    functionConfig,
    productModel,
    instructionConfig,
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      activeTab: "0",
      deviceType: "",
      model: {
        services: [],
        properties: [],
        events: [],
      },
      id: "",
      thingModelId: "",
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    handleClick(tab) {
      if (tab.paneName == 2) {
        this.$nextTick(() => {
          this.$refs.refproductModel.ProductModelPage();
        });
      } else if (tab.paneName == 3) {
        this.$nextTick(() => {
          this.$refs.refInstructionConfig.getInstructionList();
        });
      }
    },
    getInfo(deviceType, row) {
      // this.loading=true;
      this.dialogVisible = true;
      this.deviceType = deviceType;
      this.id = row.id;
      this.$nextTick(() => {
        this.getData();
      });
    },
    async getData() {
      let res = await reqByProductKey(this.deviceType);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      const data = res.data.data || {};
      console.log(data);
      this.thingModelId = data.id;
      if (data.model) {
        data.model.services = data.model.services || [];
        data.model.properties = data.model.properties || [];
        data.model.events = data.model.events || [];
      }
      this.model = data.model || {
        services: [],
        properties: [],
        events: [],
      };
      this.loading = false;
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.loading = false;
      this.dialogVisible = false;
      this.activeTab = "0";
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less" scoped>
// @import url("~@views/style/tablePage.less");
@import url("../../../common.less");

::v-deep .el-tabs__header {
  background: @primaryBgcolor2;
  // border-bottom: 1px solid #e4e7ed;
}

::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #7367f0;
}

::v-deep .el-tabs__item:hover {
  color: #7367f0 !important;
  /* 鼠标悬停时的字体颜色 */
}

::v-deep .el-tabs--border-card {
  border: none !important;
}
</style>
